<template>
	<view>
		<uni-popup ref="popupDialog">
			<view class="popup-bd">
				<view class="popup-title">
					选择成员
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="complete"
					></uni-icons>
				</view>
				<view class="popup-content">
					<uni-search-bar
						v-model="searchVal"
						placeholder="搜索"
						@input="inputSearch"
						@confirm="submitSearch"
						@cancel="cancelSearch"
						v-if="showSearch"
					></uni-search-bar>
					<view class="pt20 pb20">
						<view class="flex-start flex-wrap">
							<view
								class="tag-default f32"
								@tap="chooseRelation(item, index)"
								:class="{ 'item-active': item.showFlag }"
								v-for="(item, index) in userList"
								:key="index"
							>
								<span>{{ item.name }}</span>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-bottom df ac"
					><button class="primary-button linear w90" @tap="complete">
						确 定
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	emits: ['complete', 'search'],
	props: {
		userList: {
			type: Array,
			default() {
				return []
			},
		},
		showSearch: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			dataList: [],
			chooseList: [],
			searchVal: '',
		}
	},
	methods: {
		init() {
			this.searchVal = ''
			this.dataList = this.userList
			this.$refs.popupDialog.open('bottom')
		},
		chooseRelation(item, index) {
			if (item.showFlag && item.id == uni.getStorageSync('userId')) {
				uni.showToast({
					title: '不能移除自己，请重新选择',
					icon: 'none',
				})
				return
			} else {
				this.$emit('complete', { ...item, index: index })
			}
		},
		complete() {
			this.$refs.popupDialog.close()
		},
		//输入搜索
		inputSearch(event) {
			this.$emit('search', event)
		},
		//确认搜索
		submitSearch(event) {
			this.$emit('search', event.value)
		},
		//取消搜索
		cancelSearch() {
			this.$emit('search', '')
		},
	},
	watch: {
		userList(val) {
			this.dataList = val
		},
	},
}
</script>

<style scoped lang="scss">
.tag-default {
	border: 2rpx solid $active-color;
	color: $active-color;
	display: inline-block;
	margin: 10rpx 5rpx;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 15rpx;
	font-size: 32rpx;
	border-radius: 6rpx;
	&.item-active {
		background-color: $active-color;
		color: #ffffff;
	}
}
.popup-title {
	background: linear-gradient(90deg, #e3edff 0%, rgba(223, 234, 255, 0) 100%);
}
</style>
